<script setup>
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import MyDatails from "../../components/MyDatails.vue";
import { geShowoneAPi } from "../../http/http";
const { push } = useRouter();
const data = reactive({
  id: "",
  show: false,
  info: {
    // 头像
    avatar: "",
    // 用户名字
    user_nickname: "",
    // 用户手机号
    tel: "",
    // 城市
    city_name: "",
    // 地区名字
    area_name: "",
    // 性别
    sex: "",
    // 年级数据
    grade: {},
    // 选着的年级
    grade_name: "",
    // 报考专业
    major: "",
  },
});
// 调用接口
const FngeShowoneAPi = async () => {
  const { id } = JSON.parse(localStorage.getItem("token"));
  data.id = id;
  let res = await geShowoneAPi(id);
  console.log(res);
  const {
    avatar,
    user_nickname,
    tel,
    city_name,
    area_name,
    sex,
    grade,
    grade_name,
    major,
  } = res.data;
  data.info.avatar = res.data.avatar;
  console.log(grade);
  data.info.user_nickname = user_nickname;
  data.info.tel = tel;
  data.info.grade = grade;
};
FngeShowoneAPi();
// 修改头像
const UPhead = () => {
  push({
    path: "/UPhead",
    query: { id: data.id },
  });
};
// 修改名字
const Upname = () => {
  push({
    path: "/Upname",
    query: { id: data.id, name: data.info.user_nickname },
  });
};
const showPopup = () => {
  show.value = true;
};
// 点击年级
const grade = () => {
  data.show = true;
};
const { info, show } = toRefs(data);
</script>
<template>
  <div class="inof">
    <!-- 头部 -->
    <MyDatails>
      <template #left>
        <van-icon name="arrow-left" @click="$router.push('/myinfo')" />
      </template>
      <template #text>
        <h3>个人信息</h3>
      </template>
    </MyDatails>
    <!-- 信息列表 -->
    <div class="info_list">
      <van-cell class="cell" title="头像" @click="UPhead" is-link>
        <img :src="info.avatar" alt="" />
      </van-cell>
      <van-cell
        title="昵称"
        is-link
        :value="info.user_nickname"
        @click="Upname"
      />
      <van-cell title="手机号码" :value="info.tel" />
      <van-cell title="性别" is-link value="保密" @click="showPopup" />
      <van-cell title="出生日期" is-link value="请选择" />
      <van-cell title="地区" is-link value="请选择" />
      <van-cell title="年级" is-link value="请选择" @click="grade" />
      <van-cell title="报考院校" is-link value="请选择" />
      <van-cell title="报考专业" is-link value="请填写" />
    </div>

    <!-- 性别 -->
    <van-popup
      v-model:show="show"
      position="bottom"
      :style="{ height: '30%' }"
    />
    <!-- 年级弹出层 -->
    <van-popup v-model:show="show" position="bottom">
      <van-area title="标题" :area-list="info.grade.list" :value="index" />
    </van-popup>
  </div>
</template>

<style lang="scss" scoped>
::v-deep .van-cell {
  align-items: center;
  border-bottom: 1px solid #f2f2f2;
  padding: 30px 20px;
}

.inof {
  padding: 0 10px;

  .info_list {
    img {
      width: 70px;
      height: 70px;
      margin-right: 10px;
      border-radius: 50%;
    }
  }
}
</style>
